Azure Static Web Apps publishes a website to a production environment by building apps from a GitHub repository supported by a serverless backend. The following tutorial shows how to deploy C# Blazor WebAssembly app that displays weather data returned by a serverless API.

This article uses a GitHub template repository to make it easy for you to get started. The template features a starter app that you can deploy to Azure Static Web Apps.

Now that the repository is created, create a static web app from the Azure portal.

Go to the Azure portal.

Select Create a Resource.

Search for Static Web Apps.

Select Static Web App.

Select Create.

On the Basics tab, enter the following values.

Select Sign in with GitHub and authenticate with GitHub, if you're prompted.

Enter the following GitHub values.

Note

If you don't see any repositories, you may need to authorize Azure Static Web Apps on GitHub. Then browse to your GitHub repository and go to Settings > Applications > Authorized OAuth Apps, select Azure Static Web Apps, and then select Grant. For organization repositories, you must be an owner of the organization to grant the permissions.

In the Build Details section, select Blazor from the Build Presets drop-down and the following values are populated.

Select Review + Create to verify the details are all correct.

Select Create to start the creation of the static web app and provision a GitHub Actions for deployment.

Once the deployment is completed, select Go to resource.

Select Go to resource.

There are two aspects to deploying a static app. The first provisions the underlying Azure resources that make up your app. The second is a GitHub Actions workflow that builds and publishes your application.

Before you can go to your new static web app, the deployment build must first finish running.

The Static Web Apps overview window displays a series of links that help you interact with your web app.

Select the banner that says, Click here to check the status of your GitHub Actions runs to see the GitHub Actions running against your repository. Once you verify the deployment job is complete, then you can go to your website via the generated URL.

Once GitHub Actions workflow is complete, you can select the URL link to open the website in new tab.

Together, the following projects make up the parts required to create a Blazor WebAssembly application running in the browser supported by an Azure Functions API backend.

Blazor static web app

The app exposes URLs like /counter and /fetchdata, which map to specific routes of the app. Since this app is implemented as a single page, each route is served the index.html file. To ensure that requests for any path return index.html, a fallback route gets implemented in the staticwebapp.config.json file found in the client project's root folder.

The JSON configuration ensures that requests to any route in the app return the index.html page.

If you're not going to use this application, you can delete the Azure Static Web Apps instance through the following steps:

Authenticate and authorize